<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/login.css" />
	</head>

	<body id='zbody'>
		<div id='zzbody'></div>

		<div id='head'>
			<div id='back' class="mui-action-back ">
				<img src="img/w-back.png" />
			</div>
			<div id='welcome' >
				
			</div>
		</div>
		<div id='zusername'>
			<a id="icon-person"><span id='user' class="mui-icon mui-icon-person tubiao"></span></a>
			<input id='username' placeholder="请输入手机号/邮箱">
		</div>

		<div id='zpassword'>
			<a><span id='pass' class="mui-icon mui-icon-locked tubiao"></span></a>
			<input id='password' type='password' placeholder="请输入密码">
			<a id='display'><span id='glasses' class="mui-icon mui-icon-eye tubiao"></span></a>
		</div>

		<div id='login'>
			<span>登录</span>
		</div>

		<div id='forget'>
			<span id='left' class='font'>立即注册</span><span id='right' class='font'>忘记密码</span>
		</div>

		<div id='choose'>
			<div id='phone'>用手机注册</div>
			<div id='email'>用邮箱注册</div>
			<div id='cancel'>取消</div>
		</div>
		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
			/*
						 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
						 * */

			$.noConflict();
			document.getElementById("login").addEventListener("tap", function() {
				jQuery.ajax({
					type: 'post',
					url: serverip.ip + '/login',
					dataType: 'json',
					data: {
						"account": document.getElementById("username").value,
						"password": document.getElementById("password").value
					},
					xhrFields: {
						withCredentials: true
					},
					success: function(data) {
						if(data==0){
							mui.openWindow({
								url:'personalCenter.html'
							})
						}
					}
					
				});
			});
		</script>

		<script type="text/javascript">
			mui.init()
			document.getElementById("glasses").addEventListener("tap", glasses);

			function glasses() {
				if(document.getElementById("glasses").style.color != "orange") {
					document.getElementById("glasses").style.color = "orange";
					document.getElementById("password").type = "";
				} else {
					document.getElementById("password").type = "password";
					document.getElementById("glasses").style.color = "";
				}
			}

			document.getElementById("left").addEventListener("tap", left);

			function left() {
				document.getElementById("zzbody").style.display = "block";
				document.getElementById("choose").style.display = "block";
			}

			document.getElementById("cancel").addEventListener("tap", cancel);

			function cancel() {
				document.getElementById("zzbody").style.display = "none";
				document.getElementById("choose").style.display = "none";
			}
		</script>
	</body>

</html>